<script setup>
import { ref, nextTick } from "vue";
import { message } from "ant-design-vue";
import { EditOutlined } from "@ant-design/icons-vue";
const props = defineProps({
  titleText: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入混剪名称",
  },
});
const emit = defineEmits(["changeTitle"]);
// 控制input和span切换
const isEdit = ref(false);
// input dom
const titleInput = ref(null);
// 获取焦点事件
const isEditChange = () => {
  if (props.disabled == false) {
    isEdit.value = true;
    // 自动获取焦点
    nextTick(() => {
      titleInput.value && titleInput.value.focus();
    });
  }
};
// 头部title失去焦点事件
const titleBlue = (ev) => {
  console.log(ev.target.value, "事件");
  const text = ev.target.value.trim();
  if (text) {
    emit("changeTitle", text);
  } else {
    // message.error("项目名称不能为空");
  }
  isEdit.value = false;
};
</script>

<template>
  <div class="title_box">
    <edit-outlined class="edit_icon" style="font-size: 20px" />
    <input
      type="text"
      ref="titleInput"
      class="title_input"
      :value="titleText"
      :placeholder="props.placeholder"
      @blur="titleBlue($event)"
      v-show="isEdit"
    />
    <a-tooltip placement="bottom">
      <template #title>
        <span>{{ titleText }}</span>
      </template>
      <span class="title_text" v-show="!isEdit" @click="isEditChange">{{
        titleText
      }}</span>
    </a-tooltip>
  </div>
</template>

<style lang="less" scoped>
.edit_icon {
  // color: var(--ss-primary-color);
  margin-right: 2px;
  font-weight: 600;
  display: none;
}
// 头部中间title样式
.title_box {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  color: #1c1f23;
  font-family: PingFang SC;
  display: flex;
  // justify-content: center;
  align-items: center;
  &:hover .edit_icon {
  display: block;

  }
  .title_text {
    cursor: pointer;
    max-width: 400px;
    overflow: hidden;
    // text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
    display: block;
  }

  .title_input {
    border: none;
    outline: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: #1c1f23;
    font-family: PingFang SC;
    // text-align: center;
  }
}
</style>
